/*
包裹状态20
*/

<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button type="primary" @click="handleAddUpdate()" v-repeatClick>添加</el-button>
      <el-button @click="handleBeforeUpdate" v-repeatClick>修改</el-button>
      <el-button @click="enabled(false)">禁用</el-button>
      <el-button @click="enabled(true)">启用</el-button>
      <el-button @click="view" v-repeatClick>查看</el-button>
      <el-button @click="getWorkpoint" v-repeatClick>刷新</el-button>
      <el-button type="danger" @click="delWorkpoint" v-repeatClick>删除</el-button>
    </my-header>

    <!-- 列表区 -->
    <div style="flex: 1; margin-bottom: 10px">
      <div style="display: flex" class="content-height">
        <el-card style="width: 250px">
          <el-tree
            :data="treeData"
            highlight-current
            node-key='id'
            ref="tree"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-card>
        <el-card style="flex: 1; margin-left: 10px">
          <div class="app-page">
            <!-- 搜索区 -->
            <div class="content-flex">
              <div>
                <el-form ref="search" :model="search" inline size="small">
                  <el-form-item label="" prop="batchName">
                    <el-input
                      placeholder="搜索:工作地点/编码/备注"
                      v-model="search.info"
                      clearable
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="" prop="canChoose">
                    <el-select
                      clearable
                      v-model="search.canChoose"
                      placeholder="是否可选"
                      style="width: 100px">
                      <el-option label="是" :value="true"></el-option>
                      <el-option label="否" :value="false"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="enabled">
                    <el-select
                      clearable
                      v-model="search.enabled"
                      placeholder="是否启用"
                      style="width: 100px">
                      <el-option label="是" :value="true"></el-option>
                      <el-option label="否" :value="false"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="query_batchId">
                    <el-button type="primary" round @click="getWorkpoint">搜索</el-button>
                    <el-button
                      type="warning"
                      round
                      @click="$refs.search.resetFields()"
                    >重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div style="margin-bottom: 10px;min-width: 100px;text-align: right" class="storeColor">
                <el-button
                  type="text"
                  style="font-size: 14px"
                >{{ currentNode.label }}</el-button>
              </div>
            </div>
            <!-- 列表区 -->
            <div style="flex: 1">
              <el-table
                height="100%"
                :data="data"
                border
                stripe
                highlight-current-row
                ref="multipleTable"
                @row-dblclick="handleRowDbclick"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="index" width="55" align="center">
                </el-table-column>
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column label="工作点名称" prop="place" width="200"></el-table-column>
                <el-table-column label="编码" prop="code" width="200"></el-table-column>
                <el-table-column label="是否可选"  width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.canChoose"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="启用" align="center" width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.enabled"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="可批量更新" align="center" width="100">
                  <template slot-scope="scope">
                    <span style="font-size: 20px">
                      <i
                        class="el-icon-circle-check"
                        style="color: #67c23a"
                        v-if="scope.row.moreMod"
                      ></i>
                      <i
                        class="el-icon-circle-close"
                        style="color: #f56c6c"
                        v-else
                      ></i>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column label="备注" prop="note"></el-table-column>
              </el-table>
            </div>
            <!-- 分页区 -->
            <div style="margin-top: 10px">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200, 500, 1000]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 添加修改查看登机批次信息 -->
    <el-dialog
      :title="title + '工作点'"
      v-dialog-drag
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="700px"
      @close="restForm"
    >
      <div style="position: relative">
        <el-form
          size="small"
          :model="baseForm"
          label-position="left"
          label-width="200px"
          ref="baseForm"
          :rules="baseFormRules"
        >
          <el-row :gutter="20" class="self-form-item">
            <el-col :span="12">
              <el-form-item label="名称" prop="place">
                <el-input v-model="baseForm.place"></el-input>
              </el-form-item>
              <el-form-item label="是否可选项" prop="canChoose">
                <el-select
                  clearable
                  v-model="baseForm.canChoose"
                  placeholder="请选择"
                  style="width: 100%">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="编码" prop="code">
                <el-input v-model="baseForm.code"></el-input>
              </el-form-item>
              <el-form-item label="是否可批量更新" prop="moreMod">
                <el-select
                  clearable
                  v-model="baseForm.moreMod"
                  placeholder="请选择"
                  style="width: 100%">
                  <el-option label="是" :value="true"></el-option>
                  <el-option label="否" :value="false"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="" label-width="0">
            <el-input placeholder="备注" v-model="baseForm.note"></el-input>
          </el-form-item>
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-checkbox v-model="baseForm.enabled">启用</el-checkbox>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit">保存</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let search = {
  info: "",
  //是否启用
  enabled: "",
  canChoose:''
};

//登机批次信息表单
let baseForm = {
  id:'',
  place:'',
  code:'',
  canChoose: false,
  moreMod:false,
  note:'',
  //是否启用
  enabled: true,
};

import myHeader from "@/components/pageHEader/pageHeader";
import { dateFormat } from "@/utils";
import {
  getWorkpoint,
  addWorkpoint,
  modWorkpoint,
  delWorkpoint,
  disableOrEnableWorkpoint
} from '@/api/baseconfig/wordpoint'
export default {
  name: "wordpoint",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      treeData: [],
      //搜索
      search: this.cloneObj(search),
      //选中发货渠道
      currentNode: {},
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm: this.cloneObj(baseForm),
      baseFormRules:{
        place: [this.$RegExp.required('名称不能为空')],
        code: [this.$RegExp.required('编码不能为空')],
        canChoose: [this.$RegExp.required('是否可选不能为空')],
        moreMod: [this.$RegExp.required('批量更新不能为空')],
      }
    };
  },
  mounted() {
    this.getWorkpoint();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getWorkpoint();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getBoarding();
    },
    handleNodeClick(node) {
      this.currentNode = node;
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
      });
    },
    handleBeforeUpdate(){
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      //修改处理
      if (row) {
        this.title = "修改";
        //将数据复制给form
        this.handleModform(row, this.baseForm);
        this.dialogFormVisible = true;
      } else {
        this.title = "添加";
        this.dialogFormVisible = true;
      }
    },
    getWorkpoint() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        enabled: this.search.enabled,
      };
      //获取左侧树数据
      this.treeData = [
        {
          label:'包裹',
          id:1,
          children:[
            {
              label:'上门取件',
              id:2
            },{
              label:'商品代购',
              id:3
            },
          ]
        }
      ]
      this.currentNode = this.treeData[0]
      this.$nextTick(()=>{
        this.$refs.tree.setCurrentKey(this.treeData[0].id);
      })
      getWorkpoint(query).then((resp) => {
        this.data = resp.data.records;
        this.total = resp.data.total;
      });
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = Object.assign(
            this.baseForm
          );
          let request;
          if (this.title == "添加") {
            request = addWorkpoint(submit);
          } else {
            request = modWorkpoint(submit);
          }
          request.then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getWorkpoint();
          });
        }
      });
    },
    //查看门店信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看'
    },
    //启用或禁用
    enabled(enabled) {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      let stores = this.multipleSelection.map((item) => item.id);
      let tip;
      if (enabled) {
        tip = "此操作将启用该条数据, 是否继续?";
      } else {
        tip = "此操作将禁用该条数据, 是否继续?";
      }
      this.confirm(tip).then(() => {
        disableOrEnableWorkpoint(stores,{enabled}).then((resp) => {
          this.$message.success(resp.message || "成功");
          this.getWorkpoint();
        });
      });
    },
    //删除门店
    delWorkpoint() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      this.confirm().then(() => {
        delWorkpoint(this.multipleSelection.map((item) => item.id)).then(
          (resp) => {
            this.$message.success(resp.message || "成功");
            this.getWorkpoint();
          }
        );
      });
    },
  },
};
</script>

<style scoped lang='scss'>
  .self-form-item{
    /deep/ .el-form-item__content{
      margin-left:0px !important;
    }
  }
</style>


